<#assign ctx=springMacroRequestContext.contextPath />
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <title>登录</title>
    <link href="${ctx}/static/bootstrap/css/bootstrap.min.css?v=1" rel="stylesheet">
    <link href="${ctx}/css/login/login.css?v=1" rel="stylesheet">
    <link rel="stylesheet" href="${ctx}/static/iCheck/css/custom.css"/>
    <!--[if lt IE 9]>
    <meta http-equiv="refresh" content="0;ie.html"/>
    <![endif]-->
    <script>
        if (window.top !== window.self) {
            window.top.location = window.location;
        }
    </script>
    <style>
        .radio {
            margin: 0.5rem;
        }

        .radio input[type="radio"] {
            position: absolute;
            opacity: 0;
        }

        .radio input[type="radio"] + .radio-label:before {
            content: '';
            background: #f4f4f4;
            border-radius: 100%;
            border: 1px solid #b4b4b4;
            display: inline-block;
            width: 1.4em;
            height: 1.4em;
            position: relative;
            top: -0.2em;
            margin-right: 1em;
            vertical-align: top;
            cursor: pointer;
            text-align: center;
            -webkit-transition: all 250ms ease;
            transition: all 250ms ease;
        }

        .radio input[type="radio"]:checked + .radio-label:before {
            background-color: #3197EE;
            box-shadow: inset 0 0 0 4px #f4f4f4;
        }

        .radio input[type="radio"]:focus + .radio-label:before {
            outline: none;
            border-color: #3197EE;
        }

        .radio input[type="radio"]:disabled + .radio-label:before {
            box-shadow: inset 0 0 0 4px #f4f4f4;
            border-color: #b4b4b4;
            background: #b4b4b4;
        }

        .radio input[type="radio"] + .radio-label:empty:before {
            margin-right: 0;
        }
    </style>
</head>
<body class="signin">
<div class="signinpanel">
    <div class="col-md-4"></div>
    <div class="col-md-4">
        <form id="signupForm">
            <h3 class="text-center">用户登录</h3>
            <p class="m-t-md text-center">欢迎登录后台管理系统</p>
            <input type="text" id="username" name="username" class="form-control uname"/>
            <div id="password_switch">
                <input type="password" id="password" name="password" class="form-control pword m-b"/>
            </div>
            <div id="finger_switch" class="row">
                <div class="col-md-2" style="height: 50px;">
                    <img src="../../img/login/finger.png" style="height: 100%; width: 100%;" alt=""/>
                </div>
                <div class="col-md-6" style="height: 50px;vertical-align:center;">
                    <label class="control-label" style="margin-top: 15px;"> 点击登陆后,把手指放在指纹仪上验证。</label>
                </div>
            </div>
            <div class="row form-inline" style="margin-top: 10px;">
                <div class="radio" onclick="switch_login()">
                    <input id="radio-1" name="loginType" type="radio" value="md5" checked>
                    <label for="radio-1" class="radio-label">密码登录</label>
                </div>
                <div class="radio" onclick="switch_login()">
                    <input id="radio-2" name="loginType" type="radio" value="finger">
                    <label for="radio-2" class="radio-label">指纹登录</label>
                </div>
                <#--<label class="radio-inline" onclick="switch_login()">-->
                <#--<input type="radio" class="i-checks" name="loginType" checked="true" value="md5"> 密码登录-->
                <#--</label>-->
                <#--<label class="radio-inline" onclick="switch_login()">-->
                <#--<input type="radio" class="i-checks" name="loginType" value="finger">-->
                <#--</label>-->
            </div>
            <a id="login" class="btn btn-login btn-block">登录</a>
        </form>
    </div>
    <#--<div class="footer"></div>-->
</div>
<!-- 全局js -->
<script src="${ctx}/static/jquery/jquery.min.js?v=1"></script>
<script src="${ctx}/static/bootstrap/js/bootstrap.min.js?v=1"></script>
<!-- jQuery Validation plugin javascript-->
<script src="${ctx}/static/jquery/validate/jquery.validate.min.js?v=1"></script>
<script src="${ctx}/static/layerui/layer.js?v=1"></script>
<script type="text/javascript" src="${ctx}/static/iCheck/js/icheck.min.js"></script>
<script type="text/javascript" src="${ctx}/js/common/ajax.js"></script>
<script type="text/javascript">
    var websocket = null;
    function connection(callBack) {
        websocket = new WebSocket("ws://127.0.0.1:8181/add");
        //连接发生错误的回调方法
        websocket.onerror = function () {
            console.log("websocket连接错误！")
        };

        //连接成功建立的回调方法
        websocket.onopen = function (event) {
            console.log("websocket连接成功！");
            callBack();
        };
        //连接关闭的回调方法
        websocket.onclose = function () {
            console.log("websocket连接关闭！");
        };
    }


    $(document).ready(function () {
        //初始化icheck插件
        $("#finger_switch").hide();
        $("#login").on('click', function () {
            $("#signupForm").submit();
        });
        validateRule();
        $("body").keydown(keyDownLogon);

    });

    $.validator.setDefaults({
        submitHandler: function () {
            login();
        }
    });

    function login() {
        var type = $('input[name="loginType"]:checked').val();
        var username = $("#username").val();
        var password = $("#password").val();
        var param = {loginType: type, username: username, password: password};
        if (type == 'finger') {
            getAjax("/api/user/finger/list", {limit: 10, offset: 0, username: username, status: '0'}, function (data) {
                var rows = data.content.rows;
                var fingers = [];
                if (rows.length == 0) {
                    layer.msg("用户不存在！");
                    return;
                } else {
                    $.each(rows, function (index, item) {
                        console.log(item.finger)
                        fingers.push(item.finger);
                    });
                }
                sendFinger(param, fingers.join(","));
            });
        } else {
            sendLogin(param);
        }
    }

    var count = 0;

    function sendFinger(param, fingers) {
        connection(function () {
            var message = {"code": "TCSYFPIFpMatch", "template": fingers};
            websocket.send(JSON.stringify(message));
            //连接关闭的回调方法
            websocket.onmessage = function (event) {
                var data = JSON.parse(event.data);
                console.log("返回的消息:", data);
                if (data.code == "TCSYFPIFpMatch" && data.result == "success") {
                    sendLogin(param);
                } else {
                    layer.msg("指纹读取失败，重新读取");
                    count++;
                    if (count > 10) {
                        layer.alert("<em style='color:red'>" + "指纹读取失败，联系管理员" + "</em>");
                        return;
                    }
                    sendFinger(param, fingers);
                }
            }
        })
    }

    function sendLogin(param) {
        $.ajax({
            type: "POST",
            url: "${ctx}/login",
            data: param,
            success: function (data) {
                if (data.code == 0) {
                    var index = layer.load(1, {
                        shade: [0.1, '#fff'] //0.1透明度的白色背景
                    });
                    window.location.href = '${ctx}/index';
                } else {
                    layer.msg(data.msg)
                }
            },
            error: function () {
                layer.msg("网络请求错误，请刷新重试！");
            }
        });
    }

    function switch_login() {
        var type = $('input[name="loginType"]:checked').val();
        if ('md5' == type) {
            $("#finger_switch").hide();
            $("#password_switch").show();
        } else {
            $("#finger_switch").show();
            $("#password_switch").hide();
        }
    }

    function keyDownLogon() {
        if (event.keyCode == "13") {
            $("#login").trigger('click');
        }
    }

    function validateRule() {
        var icon = "<i class='fa fa-times-circle'></i> ";
        $("#signupForm").validate({
            rules: {
                username: {
                    required: true
                }
                // ,
                // password: {
                //     required: true
                // }
            },
            messages: {
                username: {
                    required: icon + "请输入您的用户名",
                }
                // ,
                // password: {
                //     required: icon + "请输入您的密码",
                // }
            }
        })
    }
</script>
</body>
</html>
